import type { VbenFormProps, VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import { queryPage } from './api';
import { ref } from 'vue';
import { z } from '#/adapter/form';
import { useStoreStore } from '#/store';

import { usePermissionsStore } from '#/store';

export const storeId = ref(useStoreStore().getStoreId());

// 操作id
export const idKey = ref('sliderId');
export const handleId = ref('');

// 表格表单数据
export const formOptions: VbenFormProps = {
  schema: [
    {
      fieldName: 'orderState',
      label: '订单状态',
      component: 'Select',
      defaultValue: '',
      componentProps: {
        options: [
          { label: '全部', value: -1 },
          { label: '待付款', value: 1 },
          { label: '已支付', value: 3 },
          { label: '已取消', value: 4 },
        ],
      },
    },
    {
      fieldName: 'state',
      label: '借阅状态',
      component: 'Select',
      defaultValue: '',
      componentProps: {
        options: [
          { label: '借阅中', value: 0 },
          { label: '已归还', value: 1 },
          { label: '已预期', value: 2 },
        ],
      },
    },
  ],
  wrapperClass: 'grid-cols-5',
};

// 表格数据
export const gridOptions: VxeTableGridOptions = {
  showOverflow: false,
  columnConfig: {
    resizable: true,
  },
  scrollY: {
    enabled: true,
    gt: 0,
  },
  columns: [
    { title: '序号', type: 'seq', width: 80 },
    // {
    //   title: '封面图',
    //   field: 'sliderImg',
    //   align: 'center',
    //   cellRender: {
    //     name: 'CellImageViewer',
    //     props: { width: '160px', height: '60px' },
    //   },
    //   width: 200,
    // },
    { title: '借阅人', field: 'nickName', align: 'center', width: 120 },
    { title: '联系方式', field: 'mobile', align: 'center', width: 120 },
    { title: '微馆', field: 'storeName', align: 'center', width: 240 },
    // { title: '借阅书籍', field: 'bookName', align: 'left', width: 220 },
    {
      title: '借阅书籍',
      slots: { default: 'books' },
      align: 'center',
      width: 240,
    },
    { title: '借阅时间', field: 'borrowTime', align: 'center', width: 180 },
    { title: '借阅结束时间', field: 'returnTime', align: 'center', width: 180 },
    { title: '借阅天数', field: 'borrowDay', align: 'center', width: 120 },
    { title: '借阅金额（￥）', field: 'rent', align: 'center', width: 120 },
    {
      title: '订单状态',
      field: 'orderState',
      cellRender: {
        name: 'CellDict',
        props: {
          dictData: [
            { label: '待付款', value: 1 },
            { label: '已支付', value: 3 },
            { label: '已取消', value: 4 },
          ],
        },
      },
      width: 120,
    },
    {
      title: '借阅状态',
      field: 'state',
      cellRender: {
        name: 'CellDict',
        props: { dictType: 'BORROW_STATE' },
      },
      width: 120,
    },
    { title: '归还时间', field: 'returnTime', align: 'center', width: 180 },
    {
      slots: { default: 'action' },
      fixed: 'right',
      title: '操作',
      width: 120,
      visible: usePermissionsStore().IsOrdinary,
    },
  ],
  minHeight: '100%',
  maxHeight: '100%',
  proxyConfig: {
    ajax: {
      query: async ({ page }, formValues) => {
        let params = {
          page: page.currentPage,
          limit: page.pageSize,
          ...formValues,
        };
        if (usePermissionsStore().IsOrdinary) params.storeId = storeId.value;
        return await queryPage(params);
      },
    },
    response: {
      result: 'data.records',
      total: 'data.total',
      list: 'data.records',
    },
  },
  pagerConfig: {
    enabled: true,
    pageSize: 10,
  },
  toolbarConfig: {
    custom: true,
    export: false,
    import: false,
    refresh: true,
    zoom: true,
  },
};

// 编辑弹窗表单配置
export const drawerFormSchema: VbenFormSchema[] = [
  {
    component: 'Input',
    defaultValue: '',
    fieldName: idKey.value,
    label: '轮播图id',
    dependencies: {
      show() {
        return false;
      },
      triggerFields: [''],
    },
  },
  {
    component: 'Input',
    componentProps: {
      placeholder: '请输入轮播图标题',
      allowClear: true,
    },
    fieldName: 'sliderTitle',
    label: '轮播图标题',
    rules: 'required',
  },
  {
    component: 'Select',
    componentProps: {
      allowClear: true,
      options: [
        {
          label: '首页',
          value: 1,
        },
        {
          label: '微馆推荐',
          value: 2,
        },
      ],
      placeholder: '请选择轮播图类型',
    },
    fieldName: 'sliderType',
    label: '轮播图类型',
    rules: 'required',
  },
  {
    component: 'RadioGroup',
    componentProps: {
      options: [
        { label: '外部跳转', value: 1 },
        { label: '图文内容', value: 2 },
        { label: '无跳转', value: 3 },
      ],
    },
    fieldName: 'jumpType',
    label: '跳转方式',
    rules: 'required',
    defaultValue: 3,
  },
  {
    component: 'Input',
    componentProps: {
      placeholder: '请输入跳转网址以http://或https://开头',
      allowClear: true,
    },
    help: '请输入跳转网址以http://或https://开头',
    fieldName: 'content',
    label: '跳转网址',
    rules: 'required',
    dependencies: {
      show(values) {
        return values.jumpType == 1;
      },
      triggerFields: ['jumpType'],
    },
  },
  {
    component: 'TinymceEditor',
    fieldName: 'content',
    label: '内容',
    rules: 'required',
    dependencies: {
      show(values) {
        return values.jumpType == 2;
      },
      triggerFields: ['jumpType'],
    },
  },
  {
    component: 'RadioGroup',
    componentProps: {
      options: [
        {
          label: '发布',
          value: 1,
        },
        {
          label: '下架',
          value: 0,
        },
      ],
    },
    fieldName: 'sendStatus',
    defaultValue: 1,
    label: '发布状态',
    rules: 'required',
  },
  {
    component: 'InputNumber',
    fieldName: 'sortOrder',
    componentProps: {},
    label: '排序值',
    rules: 'required',
    defaultValue: 99,
  },
  {
    component: 'ImageUpload',
    fieldName: 'sliderImg',
    help: '图片建议尺寸750*470',
    label: '图片',
    rules: z.string().min(1, { message: '请上传图片，图片建议尺寸750*470' }),
  },
];

// 提醒归还弹窗
export const returnFormSchema: VbenFormSchema[] = [
  {
    component: 'Input',
    defaultValue: '',
    fieldName: 'userId',
    label: '用户id',
    dependencies: {
      show() {
        return false;
      },
      triggerFields: [''],
    },
  },
  {
    component: 'Input',
    defaultValue: '',
    fieldName: 'orderNo',
    label: '订单id',
    dependencies: {
      show() {
        return false;
      },
      triggerFields: [''],
    },
  },
  {
    component: 'Textarea',
    componentProps: {
      placeholder: '请输入提示信息',
      allowClear: true,
      rows: 4,
    },
    fieldName: 'content',
    label: '提示信息',
    rules: 'required',
  },
];
